<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="box" v-for="(item, index) in dataList" v-if="!item.noShow" @click="clickToItem(item,index)" :key="index">
			<!-- #ifdef MP-WEIXIN -->
			<view class="box_icon">
				<image class="image" :src="item.icon" mode="aspectFit"></image>
			</view>
			<text class="box_text">{{ item.name }}</text>
			<!-- #endif -->
			
			<!-- #ifdef MP-TOUTIAO -->
			<template v-if="item.name=='联系客服'">
				<button class="bg-transparent dyimBtn" open-type="im" :data-im-id="dy_imid">
					<view class="box_icon">
						<image class="image" :src="item.icon" mode="aspectFit"></image>
					</view>
					<text class="box_text">{{ item.name }}</text>
				</button>
			</template>
			<template v-else>
				<view class="box_icon">
					<image class="image" :src="item.icon" mode="aspectFit"></image>
				</view>
				<text class="box_text">{{ item.name }}</text>
			</template>
			<!-- #endif -->
		</view>
		<u-popup class="cspopup" :show="showCsImg" mode="center" round="20">
			<view class="position-relative d-flex flex-column a-center j-center overhide" style="width: 680rpx;">
				<view class="position-absolute d-flex flex-shrink a-center j-center top-0 right-0" style="width: 110rpx;height: 100rpx;" @tap.stop="showCsImg=false">
					<text class="d-flex iconfont icon-guanbi2 text-lightdark font-weight font-md3"></text>
				</view>
				<text class="d-flex a-center j-center font-md4" style="height: 50px;">联系客服</text>
				<image class="image" :src="CsImg" style="width: 560rpx;" mode="widthFix"></image>
				<view class="d-flex" style="height: 40rpx;"></view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	let that;
	import interfaces from '@/utils/interfaces.js'
	import config from '../../../utils/config';
	export default {
		data() {
			return {
				showCsImg:false,
				CsImg:'',
				dy_imid:''
			}
		},
		props:{
			dataList: {
				type: Array,
				default: function(){
					return []
				}
			}
		},
		mounted() {
			that = this;
			// #ifdef MP-TOUTIAO
			if(config.applet_id == 20000){//快影短剧
				//清橙剧场
				this.dy_imid = '85173168182';
			}else if(config.applet_id == 20001){//乐乐短剧
				//光年剧场
				this.dy_imid = '24061006311';
			}else if(config.applet_id == 20002){//光年短剧
				//青尘剧场
				this.dy_imid = '96112724356';
			}else if(config.applet_id == 20003){//光年剧场
				// 粉墨短剧
				this.dy_imid = '85965139334';
			}
			// #endif
		},
		methods: {
			clickToItem(item, index) {
				console.log(item);
				switch (index){
					case 0:
				    uni.navigateTo({
				    	url:'/pages/likeHistory/likeHistory'
				    })
						break;
					case 1:
					uni.switchTab({
						url:'/pages/tabBar/chase/chase'
					})
						break;
					case 2:
					uni.switchTab({
						url:'/pages/tabBar/recommend/recommend'
					})
						break;
					case 3:
					// 添加收藏
					this.$emit("clickToCollect")
						break;
					case 4:
					uni.navigateTo({
						url:'/pages/rechargeRecord/rechargeRecord'
					})
						break;
					case 5:
					// 联系客服-跳企业微信
					// wx.openCustomerServiceChat({
					// 	corpId: 'ww877ed8c2d9339219',
					// 	extInfo:{
					// 		url: 'https://work.weixin.qq.com/kfid/kfcc5ffde0b1c448977'
					// 	},
					// 	success:(e)=> {
					// 		console.log('success:', e)
					// 	},
					// 	fail:(err)=> {
					// 		console.log('err:', err)
					// 		this.$refs.uToast.show({
					// 			title: err.errMsg||'跳转企业微信出错！',
					// 			type: 'error',
					// 			icon:false,
					// 			duration:3000
					// 		})
					// 	}
					// })
					
					// #ifdef MP-WEIXIN
					// 联系客服-弹出图片
					that.request({
						url: interfaces.customerImg,
						method:"GET",
						success:(res)=> {
							if(res.code == 10000){
								console.log("获取我的数据", res)
								if(res.content){
									that.CsImg = res.content;
									that.showCsImg = true;
								}
							}
						}
					})
					// #endif
						break;
					default:
						break;
				}
				let data = this.dataList[index]
				this.$emit("clickToItemCallback", data)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: row; //横向排列
		flex-wrap: wrap;     //换行排列
		margin: 0px 20px;
		
		.box {
			display: flex;
			box-sizing: border-box;
			width: 33%;
			height: 180rpx;
			text-align: center;
			justify-content: center;
			flex-direction: column;
			
			.box_icon {
				margin: 5px auto;
				width: 70rpx;
				height: 70rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			.box_text {
				font-size: 16px;
				color: #3D3D3D;
				margin-top: 12rpx;
			}
		}
		.dyimBtn{
			line-height: initial;
		}
		.dyimBtn::after{
			border-width: 0px;
		}
	}
</style>